@use '../core' as *;

.results {
    position: relative;
    padding-top: $spacing-size-2;
    padding-bottom: $spacing-size-4;
    font-size: 18px;

    border-top: 1px solid var(--color-border-secondary);
    #{$selector-darkmode} & {
        border-top: 1px solid var(--color-border-primary);
    }

    overflow: auto;
    overscroll-behavior: contain;

    &::after {
        content: '';
        position: fixed;
        width: 100%;
        height: $spacing-size-24;
        left: 0;
        bottom: var(--controls-height);
        background-image: linear-gradient(transparent, var(--color-bg-primary));
        #{$selector-darkmode} & {
            background-image: linear-gradient(
                transparent,
                color-mix(in srgb, var(--color-bg-primary), var(--color-fg-primary) 6%)
            );
        }

        pointer-events: none;
    }

    // Prevent scroll indicator from effecting last item
    > div:last-child .hit:last-child {
        position: relative;
        z-index: 1;
    }

    @media screen and (min-width: $breakpoint-docs-search-small) {
        max-height: calc(100vh - 450px);
    }
}

.hit {
    position: relative;
    display: grid;
    grid-template:
        'icon title' min-content
        'icon text' min-content / max-content 1fr;
    margin: 0 $spacing-size-4;
    padding: $spacing-size-4;
    border-radius: var(--radius-md);
    cursor: pointer;

    &[data-selected='true'] {
        background: rgba(4, 75, 147, 1);
        z-index: 1;
    }
}

.hitIcon {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-right: $spacing-size-4;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--shadow-xs);

    #{$selector-darkmode} & {
        background-color: var(--color-border-tertiary);
    }

    :global(.icon) {
        --icon-size: #{$spacing-size-8};
        --color-icon: var(--color-bg-brand-solid);

        #{$selector-darkmode} & {
            --color-icon: var(--color-fg-primary);
            opacity: 0.5;
        }
    }
}

.titleSection,
.title,
.text {
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    overflow: hidden;
    font-size: var(--text-fs-base);

    [data-selected='true'] & {
        color: var(--color-bg-primary);

        #{$selector-darkmode} & {
            color: var(--color-white);
        }
    }
}

.titleSection {
    grid-area: title;
    margin-bottom: 0;
}

.title {
    color: var(--color-fg-primary);
    font-weight: var(--text-semibold);
}

.text {
    grid-area: text;
    font-weight: var(--text-regular);
    color: var(--text-color-secondary);
}

.crumbContainer {
    padding: $spacing-size-3 0 $spacing-size-3 $spacing-size-8;
    padding-bottom: $spacing-size-2;
}

.crumb {
    font-weight: var(--text-semibold);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: var(--text-fs-base);

    #{$selector-darkmode} & {
        color: var(--color-white);
    }
}

.chevronRight {
    color: var(--color-fg-quinary);
}

.noResults {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: $spacing-size-40;
    border-top: 1px solid var(--color-border-primary);
    color: var(--color-text-tertiary);

    :global(.icon) {
        --icon-size: #{$spacing-size-10};
        --color-icon: var(--color-text-secondary);
        opacity: 0.7;

        margin-bottom: $spacing-size-2;
    }
}

.hitLink {
    color: var(--color-text-tertiary);
}
